<script setup>
import { ref } from "vue"

const contact_information = ref([
	{
		label: "电话:",
		content: "17628604116",
		icon: "电话",
	},
	{
		label: "扣扣:",
		content: "2655293493",
		icon: "QQ",
	},
	{
		label: "微信:",
		content: "17628604116",
		icon: "微信",
	},
	{
		label: "邮件:",
		content: "2655293493@qq.com",
		icon: "Email",
	},
	{
		label: "地址:",
		content: "九龙坡区杨家坪直港大道",
		icon: "地址",
	},
])
</script>
<template>
	<div class="call-me">
		<div class="contact-information">
			<div class="title">我的联系方式~~~</div>
			<div
				class="contact-information-item"
				v-for="item in contact_information"
				:key="item.label">
				<icon-svg :name="item.icon" class="icons" />
				<div class="label">{{ item.label }}</div>
				<div class="content">{{ item.content }}</div>
			</div>
		</div>
		<div class="address">s</div>
		<div class="animation">s</div>
	</div>
</template>
<style scoped lang="scss">
.call-me {
	flex: 1;
	height: inherit;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	.contact-information {
		overflow: hidden;
		height: 100%;
		width: 30%;
		display: flex;
		flex-direction: column;
		.title {
			flex: 4;
			font-size: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			animation: bounceInDown $animation-duration-2;
		}
		.contact-information-item {
			flex: 3;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30px;
			animation: zoomInDown $animation-duration-2;
			.icons {
				flex: 1;
			}
			.label {
				flex: 1;
				text-align: right;
			}
			.content {
				flex: 4;
			}
		}
	}
	.address {
		height: 100%;
		width: 22.5%;
	}
	.animation {
		height: 100%;
		width: 22.5%;
	}
}
</style>
